import { useQuery } from '@tanstack/react-query';
import { Card, Space, Spin, Typography } from 'antd';
import { map } from 'lodash';
import { memo, useEffect, useMemo, useState } from 'react';
import { v4 } from 'uuid';
import { getData } from './api';
import { item_style, outer_style } from './style';
const { Paragraph, Text } = Typography;

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const TableDemo = () => {
  const [reqKey] = useState(v4());

  const { data, isFetching } = useQuery({
    queryKey: [reqKey],
    queryFn: getData
  });

  const list = useMemo(() => data?.result ?? [], [data]) as DataType[];

  useEffect(() => {
    const obj_1: Record<string, any> = {
      a: 1,
      b: {
        c: 2,
        d: 3
      },
      c: undefined,
      d: null,
      // e: () => {}
    };

    const sum = (a: any, b: any) => a + b;

    obj_1.f = obj_1;

    const obj_2 = structuredClone(obj_1);
    obj_2.b.c = 4;

    // const obj_3 = JSON.parse(JSON.stringify(obj_1));

    console.log(111, obj_1, obj_2);
  }, []);

  return (
    <Spin spinning={isFetching}>
      <div className={outer_style}>
        {
          map(list, i => (
            <Card
              key={i.key}
              title={ i.name }
              className={`${item_style} item`}
            >
              <Space size='large'>
                <div>年龄：{ i.age }</div>
                <div>住址：{ i.address }</div>
              </Space>
            </Card>
          ))
        }
      </div>
    </Spin>
  )
};

export default memo(TableDemo);